<template>
    <div id="unit">

        <Card :bordered="false">
            <a :href="'plate?id='+this.id" slot="title">{{name}}</a>
            <hr/>
            <el-col :span="24"><div style="height: 30px"></div></el-col>
            <el-col :offset="4"  v-for="msg in tableData">
                <li>
                    <a :href="'posts?id='+msg.id">{{msg.title}}</a>
                </li>
                <el-col :span="24"></el-col>
            </el-col>
        </Card>
    </div>
</template>

<script>
    export default {
        name: "Unit",
        created: function f() {
            this.$axios
                .get('/api/plate/getById',{
                    params:{
                        id:this.id
                    }
                })
                .then((req)=>{
                    const tmp = req.data.data;
                    this.name = tmp.name;
                });
            this.$axios
                .get('/api/posts/getPosts',{
                    params:{
                        plateId:this.id,
                        page:"1"
                    }
                })
                .then((req)=>{
                    const tmp = req.data.data;
                    console.log("*****");
                    this.tableData = tmp;
                    console.log(this.tableData);
                });
        },
        data(){
            return{
                name:'',
                tableData:[{
                    id:'1',
                    title:'',
                    createTime:'',
                    start:false,
                    top:false,
                    clock:false
                }]
            }
        },
        props:['id'],
        methods:{
            jumpPosts:function (id) {
                this.$router.push("/posts?id="+id);
            }
        }
    }
</script>

<style scoped>
    #unit{
        background-color: #f7f9fb;
        height: 200px;
        width: 100%;
        border-top: 4px #ae4328 solid ;
    }
    li{
        list-style: none;
        float: left;
        /*!*padding: 0px;*!*/
        /*line-height: 20px;*/
        /*display: list-item;*/
        /*text-align: -webkit-match-parent;*/
    }
    a {
        color: #999;
        cursor: pointer;     /* 鼠标样式*/
    }
    /*a:link { color: #b3ffe9; text-decoration: none; }!* 未访问的链接 *!*/
    /*!*a:visited { color: #999; text-decoration: line-through; } !* 已访问的链接 *!*!*/
    a:hover { color: #45ffc0; text-decoration: underline; }/* 鼠标移动到链接上 */
    /*a:active { color: #F0F; } !* 选定的链接 *!*/

</style>
